<template>
  <div class="itemOrder" @click="onItemCLick">
    <div class="up">
      <p class="time">{{dateFormat(new Date(item.created * 1000))}}</p>
      <p class="price">￥{{item.price}}</p>
    </div>
    <div class="content">
      <img class="mainImg" :src=item.list[0].pic>
      <div class="con-right">
        <div class="con-text1" v-if="item.list.length>1">
          <img class="mainImg" :src=item.list[1].pic>
          <p>......</p>
        </div>
        <div class="con-text" v-else>
          <h1>{{item.list[0].title}}</h1>
          <p>{{item.list[0].nid}}</p>
        </div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-qb_gd"></use>
        </svg>
      </div>
      <div class="text-bt" v-if="receive">
        <p v-if="getState">{{getState}}</p>
        <button @click="handleCommit" v-else>{{getText}}</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Moment from 'moment';
  import OrderType from '../../pages/order/OrderType';

  export default {
    name: 'itemOrder',
    data() {
      return {
        item: this.itemObj, // 订单信息
        trade: this.tradeStatus // 交易状态
      };
    },
    props: {
      itemObj: {
        required: true
      },
      index: {
        require: true,
        type: Number
      },
      type: {
        // 订单状态类型，属于哪一栏
        type: String
      },
      tradeStatus: {
        // 跟踪订单状态
        type: String
      }
    },
    computed: {
      receive() {
        if (this.trade === OrderType.make) {
          return false;
        }
      },
      getText() {
        switch (this.trade) {
          case OrderType.waitPay:
            return '立即付款';
          case OrderType.waitReceipt:
            return '取消订单';
          case OrderType.waitReceipt2:
            return '取消订单';
          case OrderType.make:
            return '确认收货';
          case OrderType.Received:
            return '立即评价';
          case OrderType.Refund:
            return '已退款';
        }
      },
      getState() {
        if (this.trade === 'refund') {
          return '已退款';
        } else if (this.item.isComment) {
          return '已评价';
        }
      }
    },
    created() {
    },
    methods: {
      onItemCLick() {
        this.$emit('onItemCLick', this.index);
      },
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      },
      handleCommit() {
        // 点击按钮
        switch (this.trade) {
          case OrderType.waitPay:
            this.$emit('handleCommit', 'confirmPay');
            break;
          case OrderType.waitReceipt:
            this.$emit('handleCommit', 'noStateTo');
            break;
          case OrderType.waitReceipt2:
            this.$emit('handleCommit', 'noStateTo');
            break;
          case OrderType.make:
            this.$emit('handleCommit', 'noStateTo');
            break;
          case OrderType.waitReceive:
            this.$emit('handleCommit', 'confirmReceive');
            break;
          case OrderType.Received:
            this.$emit('handleCommit', 'confirmComment');
            break;
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
      itemObj: function (val) {
        this.item = val;
      },
      tradeStatus(val) {
        this.trade = val;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .itemOrder {
    width: 96vw
    margin 10px auto
    padding: 0 2vw 2vw;
    box-sizing border-box
    background white
    border-radius(5px)
    .up {
      width: 100%
      padding: 3vw 0 1vw;
      bor-b();
      flex-x();
      .time {
        word-vw(14, first-ash)
      }
      .price {
        word-vw(16, main-color)
      }
    }
    .content {
      padding 3vw 0 4vw
      flex-x(flex-start)
      position relative
      .mainImg {
        width: vw(80)
        height: vw(80)
        margin-right 3vw
      }
      .con-right {
        flex-x(flex-start)
        flex: 1
        .con-text {
          width: 64vw;
          h1 {
            word-vw(14, first-ash)
            line-height 1.5
            multi(2)
          }
          p {
            margin-top 10px
            word-vw(12, third-ash)
          }
        }
        .con-text1 {
          flex: 1;
          flex-x()
          P {
            flex: 1;
            text-align: center;
            word-vw(15, third-ash)
          }
        }
      }
    }
    .text-bt {
      position absolute
      bottom: 10px
      right: 10px
      button {
        background none
        border(main-color);
        word-vw(14, main-color)
        border-radius(20px)
        padding: 3px 6px;
      }
      p {
        word-vw(14px, #999)
      }
    }
  }

  .icon {
    width: 3vw
    height: 3vw
    fill: third-ash
  }
</style>
